<template>
	<view class="videoComponents">
		<video class="video" autoplay loop :src="videoSrc" :controls="false" :show-play-btn="false" :show-center-play-btn="false" object-fit="cover">
			<view class="navBar" :style="{ height: `${height + statusBarHeight + 5}px`, paddingTop: statusBarHeight + 'px' }">
				<image @tap="back" src="/static/previewVideo/whiteBack.png" mode=""></image>
			</view>
			<view class="operate">
				<view class="tag_list">
					<view class="addTag" @tap="addTag">
						<image style="width: 32rpx; height: 32rpx;" src="/packageHome/static/add-fill.png" mode=""></image>
						<text>添加病症标签</text>
					</view>
				</view>
				<view class="btn">
					<view class="reShoot" @tap="reShoot">
						重新拍
					</view>
					<view class="startInterpretation" @tap="startInterpretation()">
						拍摄完成
					</view>
				</view>
			</view>
		</video>
		<!-- 添加病症弹出层 -->
		<u-popup class="popup_wrap" :show="popCourseShow" mode="bottom">
			<view class="course_box">
				<view class="d-f jc-sb ai-c title_box">
					<view class="cancel_btn">取消</view>
					<view class="title_center">选择课程</view>
					<view class="confirm_btn">确定</view>
				</view>
			</view>
		</u-popup>
		<uni-popup ref="popupd" type="bottom" background-color="#fff" style="z-index: 999999;">
			<view class="pop_box">
				1321
			</view>
		</uni-popup>
	</view>
</template>
<script>
	import {
		defineComponent,
		reactive,
		toRefs
	} from 'vue';
	import config from '@/hooks/useConfig.js'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	export default defineComponent({
		setup() {
			const {
				prefix_image,
				height,
				statusBarHeight
			} = config()
			const data = reactive({
				// videoSrc:'http://vfx.mtime.cn/Video/2019/02/04/mp4/190204084208765161.mp4',
				videoSrc: '',
				height,
				statusBarHeight,
				popCourseShow: false
			})
			onLoad((option) => {
				console.log('视频预览option', option)
				data.videoSrc = option.videoSrc
			})
			const startInterpretation = () => {
				console.log('拍摄完成')
				// uni.navigateTo({
				//     url: '/pages/startInterpretation/index'
				// });
			}
			const back = () => {
				uni.$emit("back", {
					data: true
				});
				uni.navigateBack()
			}
			const reShoot = () => {
				uni.$emit("back", {
					data: true
				});
				uni.navigateBack()
			}
			// 添加病症标签
			const addTag = () => {
				console.log('添加病症标签')
				data.popCourseShow = true
				// this.$refs.popupd.open('bottom')
			}
			return {
				...toRefs(data),
				startInterpretation,
				back,
				reShoot,
				addTag
			}
		}
	})
</script>
<style lang="stylus" scoped>
	.videoComponents {
		width 100vw;
		height: 100vh;

		video {
			width: 100%;
			height: 100%;
			position relative;

			.navBar {
				box-sizing: border-box;
				position: absolute;
				top: 0;
				left: 0;
				width: 100vw;
				font-size: 32rpx;
				color: #fff;
				z-index: 100;
				text-align: left;
				display: flex;
				background: rgba(17, 17, 17, .4);
				// filter: blur(1rpx)
				overflow: hidden;
				z-index: 10;
				display: flex;

				align-items: center;

				image {
					width: 64rpx;
					height: 64rpx;
					margin-left: 28rpx;
					z-index: 999;
					// filter: blur(0)

				}
			}

			.operate {
				position: absolute;
				bottom: 0;
				left: 0;
				height: 25vh;
				width: 100vw;
				box-sizing: border-box;
				padding: 32rpx 32rpx 64rpx 32rpx;
				font-size: 32rpx;
				line-height: 100rpx;
				text-align: center;
				background: rgba(17, 17, 17, .9);
				z-index: 10;
				// filter: blur(1rpx)
				overflow: hidden;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				
				.tag_list {
					display: flex;
					flex-wrap: wrap;
					.addTag {
						margin-right: 10rpx;
						margin-bottom: 10rpx;
						box-sizing: border-box;
						// width: 212rpx;
						height: 54rpx;
						padding: 10rpx;
						border-radius: 4rpx;
						border: 2rpx solid #FFFFFF;
						display: flex;
						justify-content: center;
						align-items: center;
						font-size: 26rpx;
						font-weight: 400;
						color: #FFFFFF;
						// line-height: 38rpx;
					}
				}
				.btn {
					display: flex;
					justify-content: space-between;
					align-items: center;
				}

				.reShoot {
					width: 276rpx;
					height: 100rpx;
					border-radius: 50rpx;
					border: 4rpx solid #FFFFFF;
					color: #fff;
					z-index: 999;
					// filter: blur(0)

				}

				.startInterpretation {
					width: 398rpx;
					height: 100rpx;
					background: #FFD300;
					border-radius: 50rpx;
					color: #111111;
					z-index: 999;
					// filter: blur(0)
				}
			}
		}

		.popup_wrap {
			z-index: 999999;

			.course_box {
				padding: 0 32rpx;
				width: 100%;
				height: 626rpx;
				border-radius: 40rpx 40rpx 0rpx 0rpx;

				// background-color: pink;
				.title_box {
					width: 100%;
					height: 96rpx;

					.cancel_btn {
						font-size: 28rpx;
						line-height: 40rpx;
						color: #969799;
					}

					.title_center {
						font-size: 32rpx;
						line-height: 44rpx;
						color: #323233;
					}

					.confirm_btn {
						font-size: 28rpx;
						line-height: 40rpx;
						color: #5797EC;
					}
				}
			}
		}
		
		.pop_box {
			padding: 100rpx;
		}

	}
</style>
